﻿/// <reference path = "Base.ts" />
namespace VantCellTypes {
    interface IInputCellTypeParam extends IInputBaseParam {
        type: string;
        keyboardType: string;
        maxlength: any;
        showWordLimit: boolean;
        autosize: boolean;
        minHeight: number;
        maxHeight: number;
        enterkeyhint: string;
    }

    export class InputCellType extends InputBase<IInputCellTypeParam> {
        public setDataSource(dataSource) {
            return this.vue.setOptions(dataSource);
        }

        public onPageLoaded(info: Forguncy.Plugin.CellTypeInfo) {
            const self = this;
            const cellType = this.cellType;
            const input = this.getInputTemplate(`
:maxlength="maxlength"
:show-word-limit="showWordLimit"
:type="type"
:enterkeyhint="enterkeyhint"
:autosize="autosize"
:readonly="readonly"
@blur="onFinish"
:class="{ 'show-word-limit': ${!self.isEmpty(cellType.maxlength)} && showWordLimit }"
`);

            const option = {
                el: "#" + this.uId,
                template: `
<div class="fgc-vant-inputContainer">
    ${input}
</div>`,
                data() {
                    const baseData = self.getData(cellType);
                    const data = {
                        type: cellType.type === "text" ? cellType.keyboardType : cellType.type,
                        maxlength: self.getMaxLength(),
                        showWordLimit: cellType.showWordLimit,
                        enterkeyhint: cellType.enterkeyhint
                    };
                    return { ...baseData, ...data, autosize: self.bindAutosize(cellType) };
                },
                methods: this.getDefaultMethods({
                    onFinish() {
                        self.commitValue();
                        self.validate();
                    }
                }),
                mounted() {
                    self.setFontToInputDom(this);
                }
            };

            this.createVueApp(option);

            this.onDependenceCellValueChanged(() => {
                if (this.isFormula(cellType.maxlength)) {
                    this.vue.maxlength = this.getMaxLength();
                }
            });

            super.onPageLoaded(info);
        }
        private getMaxLength() {
            const maxlength = this.cellType.maxlength;
            const max = this.calcNumber(this.evaluateFormula(maxlength));
            return max ? max : undefined;
        }
        private bindAutosize(cellType: IInputCellTypeParam) {
            const { autosize, minHeight, maxHeight } = cellType;
            return autosize ? { minHeight, maxHeight } : false;
        }
    }
}

Forguncy.Plugin.CellTypeHelper.registerCellType("Vant.CellTypes.Input, Vant", VantCellTypes.InputCellType);